<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>计算属性的getter和setter</title>
	</head>
	<body>
        <div id="app">
          <p>First name: <input type="text" v-model="firstName"></p>
          <p>Last name: <input type="text" v-model="lastName"></p>
          <p>{{ fullName }}</p>
        </div>
	
		<script src="../../vue.js"></script>
        <script>
            const {ref, computed} = Vue;
        	const vm = Vue.createApp({
        	    setup(){
        	        const firstName = ref('Smith');
        	        const lastName = ref('Will');
        	        const fullName = computed({
        	            get: () => firstName.value + ' ' + lastName.value,
        	            set: val => {
        	                let names = val.split(' ')
                	        firstName.value = names[0]
                	        lastName.value = names[names.length - 1]
        	            }
        	        });
        	        return {
        	            firstName,
        	            lastName,
        	            fullName
        	        }
        	    }
            }).mount('#app');
        </script>
	</body>
</html>